class LayerApis {
    static createPromiseLayer(title,area,content,closeCb) {
        return new Promise(s => {
            let id = layer.open({
                title: title,
                area: area || 'auto',
                type:1,
                content: content,
                cancel: function () {
                    s(closeCb(id));
                    //s($(`#layui-layer${id} textarea`).val());
                }
            });
        });
    }
    static createTextarea(title) {
        return LayerApis.createPromiseLayer(
            title || '填写内容',
            ['100%','100%'],
            '<textarea style="width: 100%;height: 100%;resize: none;outline: none;font-size: 18px;"></textarea>',
            id => {
                return $(`#layui-layer${id} textarea`).val();
            }
        );
    }
    // attribute = {}
    static createInput(title,type,attribute) {
        let attr = ``;
        for (let i in attribute) {
            attr += `${i}="${attribute[i]}"`;
        }
        return LayerApis.createPromiseLayer(
            title || '填写内容',
            null,
            // ['100%','100%'],
            `<input type="${type}" ${attr} style="width: 100%;outline: none;font-size: 18px;"/>`,
            id => {
                return $(`#layui-layer${id} input`).val();
            }
        );
    }
    // type = 'radio' 'checkbox'
    // select = [ {value:'',text:''} ]
    // area = [width,height]
    static CreateSelect(select,title,area,type) {
        let id = OtherUtils.RandomId('li');
        $('head').append(`<style>
.${id} {
    overflow-x: hidden !important;
    overflow-y: scroll !important;
}
.${id}::-webkit-scrollbar-track-piece {
    background-color:#f8f8f8;
}
.${id}::-webkit-scrollbar {
    width:1px;
    height:9px;
}
.${id}::-webkit-scrollbar-thumb {
    background-color:#dddddd;
    background-clip:padding-box;
    min-height:28px;
}
.${id}::-webkit-scrollbar-thumb:hover {
    background-color:#bbb;
}
#${id} li {
    list-style: none;
    height: 30px;
    line-height: 30px;
}
#${id} li:hover {
    background: #f4f4f4;
}
</style>`)
        let content = `<ul id="${id}" style="padding: 0 10px;">
${select.map(s => {
            return `<li><input type="${type}" name="${id}" value="${s.value}"/><label>${s.text}</label></li>`;
        }).join('\r\n')}
</ul>`;
        console.log(content);
        setTimeout(() => {
            $(`#${id}`).parent().addClass(id);
            $(`#${id} li`).on('click',function () {
                this.children[0].click();
            })
        },500);
        return LayerApis.createPromiseLayer(title,area,content,id => {
            let value = [];
            $(`#layui-layer${id} input`).each((ind,rad) => {
                if (rad.checked) {
                    value.push(rad.value);
                }
            });
            return value;
        });
    }
    static createRadio(select,title,area) {
        return LayerApis.CreateSelect(select,title,area,'radio');
    }
    static createCheckbox(select,title,area) {
        return LayerApis.CreateSelect(select,title,area,'checkbox');
    }
    static CreateConfirm(content) {
        return new Promise(s => {
            layer.confirm(content,{
            },ind => {
                layer.close(ind);
                s('ok');
            },ind => {
                layer.close(ind);
                s('close');
            });
        })
    }
}
